.layout-aside-Default{
  background:var(--ba-bg-color-overlay);
  margin:16px 0 16px 16px;
  height:calc(100vh - 32px);
  box-shadow:var(--el-box-shadow-light);
  border-radius:var(--el-border-radius-base);
  overflow:hidden;
  transition:width 0.3s ease;
  width:v-bind(menuWidth);
  .app-name{
    font-weight:bold;
    font-size:18px;
    color:#409eff;
  }
  .app-logo{
    padding:10px;
    background:#fff;
    line-height:50px;
    box-sizing:border-box;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    .app-logo-img{
      width:30px;
    }
    h1{
      display:inline-block;
      color:#fff;
      font-size:18px;
      text-align:center;
      font-weight:normal;
    }
  }
  .app-logo-on{
    overflow:hidden;
    text-align:center;
    justify-content:center;
    .app-name{
      display:none;
    }
    .logo-wrap{
      width:50px;
      height:50px;
      overflow:hidden;
    }
    .logo-wrap{
      display:none;
    }
  }
}
.layout-aside-Classic,
.layout-aside-Double{
  background:var(--ba-bg-color-overlay);
  margin:0;
  height:100vh;
  overflow:hidden;
  transition:width 0.3s ease;
  width:v-bind(menuWidth);
}
.shrink{
  position:fixed;
  top:0;
  left:0;
  z-index:9999999;
}
.app-header{
  display:flex;
  padding:0;
  color:#333;
  background:transparent;
  height:50px;
  line-height:50px;
  .app-header-nav{
    flex-wrap:wrap;
  }
  .app-helper-menu{
    margin-left:auto;
    display:flex;
    .app-name{
      margin-left:10px;
    }
  }
  .header-dropdown-wrap{
    &:hover{
      cursor:pointer;
    }
  }
}
.app-header-down{
  left:-200px;
}
.nav-menus.Default{
  border-radius:var(--el-border-radius-base);
  box-shadow:var(--el-box-shadow-light);
}
.nav-menus{
  display:flex;
  align-items:center;
  height:100%;
  margin-left:auto;
  background-color:#fff;
  overflow:hidden;
  .nav-menu-item{
    height:100%;
    padding:0 15px;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    .nav-menu-icon{
      box-sizing:content-box;
      color:#ccc;
    }
    .anticon{
      font-size:15px;
    }
    &:hover{
      color:#333;
      .anticon{
        animation:twinkle 0.3s ease-in-out;
      }
    }
  }
  .admin-info{
    display:flex;
    height:100%;
    padding:0 10px;
    align-items:center;
    cursor:pointer;
    user-select:none;
    color:v-bind("configStore.getColorVal(\"headerBarTabColor\")");
  }
  .admin-name{
    padding-left:6px;
    white-space:nowrap;
  }
  .nav-menu-item:hover,
  .admin-info:hover,
  .nav-menu-item.hover,
  .admin-info.hover{
    background:#f5f5f5;
  }
}
.app-overlay-menu{
  width:115px;
  a, .ant-dropdown-menu-title-content{
    color:#87909b;
    &:hover{
      color:#1d2129;
    }
  }
  > li{
    line-height:28px;
  }
}
@keyframes twinkle{
  0%{
    transform:scale(0);
  }
  80%{
    transform:scale(1.2);
  }
  100%{
    transform:scale(1);
  }
}
.app-content{
  padding-top:15px;
}
.app-view{
  .ant-card-body{
    min-height:calc(100vh - 155px);
  }
}
// app tag view
.app-tagsview{
  white-space:nowrap;
  border-bottom:1px solid #d8dce5;
  box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
  background:#fff;
  border-radius:5px;
  .ant-tabs-card{
    .ant-tabs-nav{
      .ant-tabs-tab{
        line-height:49px;
        margin-right:0;
        margin-left:0 !important;
        border:0;
        border-left:1px solid #f6f6f6;
        border-radius:0;
        padding:0 14px;
        cursor:pointer;
        background-color:#fff;
        vertical-align:top;
        font-size:12px;
        border-radius:0 !important;
        &:first-of-type{
          margin-left:15px !important;
          border-left:1px solid #f6f6f6;
          text-indent:-999em;
          padding:0 20px;
          background:url(@/assets/home-icon.png) 50% 50% no-repeat;
          &:hover{
            background-color:#fff;
          }
          .ant-tabs-tab-remove{
            display:none;
          }
          .ant-tag{
            border:0;
          }
        }
        .ant-tabs-tab-remove{
          margin-left:0;
          margin-right:0;
        }
        svg{
          width:0;
          transition:all 0.15s;
        }
        &:hover{
          svg{
            width:1em;
          }
          background-color:#f2f3f5;
          .anticon-close{
            opacity:1;
            margin-left:7px;
          }
        }
        .anticon-close{
          color:#999;
          opacity:0.6;
          position:relative;
          margin-left:0;
          &:hover{
            color:#666;
            border-radius:8px;
            padding:2px;
            margin-right:-4px;
            background-color:#ccc;
            opacity:1;
          }
        }
        &.ant-tabs-tab-active{
          background-color:#42b983;
          border-color:#42b983;
          .ant-tabs-tab-btn{
            color:#fff;
          }
          .anticon-close{
            color:#fff;
            &:hover{
              color:#333;
              background-color:#fff;
            }
          }
          &:first-of-type{
            border-color:#42b983;
            background:url(@/assets/home-hover-icon.png) #42b983 50% 50% no-repeat;
          }
        }
      }
    }
    .ant-tabs-tab-btn{
      transition:none;
    }
    .ant-tabs-extra-content{
      margin:0 10px;
    }
    //newversion
    & > li{
      display:inline-block;
      &:first-of-type{
        margin-left:15px;
        border-left:1px solid #f6f6f6;
        .ant-tag{
          border:0;
        }
      }
      &:last-of-type{
        margin-right:15px;
        border-right:1px solid #f6f6f6;
      }
      &.tag-home{
        .ant-tag{
          padding:0 13px;
        }
        svg{
          width:1em;
        }
      }
    }
    .ant-tag{
      line-height:35px;
      margin-right:0;
      border:0;
      border-left:1px solid #f6f6f6;
      border-radius:0;
      padding:0 12px;
      cursor:pointer;
      background-color:#fff;
      vertical-align:top;
      .anticon-close{
        padding-left:3px;
        &:hover{
          color:#333;
        }
      }
      svg{
        width:0;
        transition:all 0.15s;
      }
      &:hover{
        svg{
          width:1em;
        }
        background-color:#f2f3f5;
        .anticon-close{
          opacity:1;
        }
      }
      .anticon-close{
        color:#999;
        opacity:0.6;
        position:relative;
        margin-left:7px;
        &:hover{
          color:#666;
          border-radius:8px;
          padding:2px;
          margin-right:-1px;
          background-color:#ccc;
          opacity:1;
        }
      }
    }
    .tag-active{
      svg{
        width:1em;
      }
      .ant-tag{
        background-color:#42b983;
        color:#fff;
        border-color:#42b983;
        .anticon-close{
          color:#fff;
          &:hover{
            color:#333;
            background-color:#fff;
          }
        }
      }
    }
  }
  .contextmenu{
    margin:0;
    background:#fff;
    z-index:3000;
    position:absolute;
    list-style-type:none;
    padding:5px 0;
    border-radius:4px;
    font-size:12px;
    font-weight:400;
    color:#333;
    box-shadow:2px 2px 3px 0 rgba(0, 0, 0, .3);
    li{
      margin:0;
      padding:0px 16px;
      height:30px;
      cursor:pointer;
      &:hover{
        background:#eee;
      }
    }
  }
}
